<DOCTYPE html>
    <html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="..\bootstrap3\css\bootstrap.min.css" rel="stylesheet">
        <script src="..\bootstrap3\js\jquery-1.12.4.min.js">

        </script>
        <script src="..\bootstrap3\js\bootstrap.min.js">

        </script>
        <script>
             function showMsg() {
               $('#myModal').modal({keyboard:true})
            }
        </script>
    </head>
    <input id="t1" type="hidden" value="123">
    <!--模态框调整大小  属性为：大 bs-example-modal-lg   小 bs-example-modal-sm !-->
    <div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times;</span></button>
                    <h3 class="modal-title">提示</h3>
                </div>
                <div class="modal-body">
                    <!--模态框中可以使用格栅系统，但是需要在 modal-body中，并且嵌套在 row 类下 !-->
                    <div class="row">
                        <div class="col-md-4">
                            <p>操作完成！</p>
                            <p>操作完成！</p>
                        </div>
                        <div class="col-md-4">
                            <p>山口山</p>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">保存/确认</button>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fuild">
        <button type="button" class="btn btn-success " data-toggle="modal" data-target="#myModal" data-whatever="操作状态">保存</button>
        <button type="button" class="btn btn-success " onclick="showMsg()" data-whatever="操作状态">JS调用</button>
        
    </div>


    </html>

    <script>
       
        //show方法调用后立即触发
        $('#myModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var recipient = button.data('whatever') // Extract info from data-* attributes
            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            var modal = $(this)
            modal.find('.modal-title').text('提示： ' + recipient)
            modal.find('.modal-body input').val(recipient)
        })

        $('#myModal').on('hide.bs.modal',function(e){
            alert('模态框关闭')
        })
    </script>
    <!--
    <script>
        var test = $('#t1').val();
        alert(test);
    </script> !-->